<template>
	<view style="overflow: hidden;">
		<view class="horizontal">
			<view class="one">
				<view class="title">机构签署</view>
				<view class="gou">
					<view class="iconfont icongou" :class="[!finishTime[0] ? 'no' : '']"></view>
					<view class="line"></view>
				</view>
				<view class="info" v-if="finishTime[0]">已完成</view>
				<view class="info" v-else>未完成</view>
			</view>
			<view class="one">
				<view class="title">客户签署</view>
				<view class="gou">
					<view class="iconfont icongou" :class="[!finishTime[1] ? 'no' : '']"></view>
					<view class="line"></view>
				</view>
				<view class="info" v-if="finishTime[1]">已完成</view>
				<view class="info" v-else>未完成</view>
			</view>
			<view class="one">
				<view class="title">支付费用</view>
				<view class="gou">
					<view class="iconfont icongou" :class="[!finishTime[2] ? 'no' : '']"></view>
					<view class="line"></view>
				</view>
				<view class="info" v-if="finishTime[2]">已支付</view>
				<view class="info" v-else>未支付</view>
			</view>
			<view class="one">
				<view class="title">签约完成</view>
				<view class="gou">
					<view class="iconfont icongou" :class="[!finishTime[3] ? 'no' : '']"></view>
					<view class="line"></view>
				</view>
				<view class="info" v-if="finishTime[2]">待审核</view>
				<view class="info" v-else>未完成</view>
			</view>
		</view>
		<view class="vertical">
			<view class="two">
				<view class="point-con">
					<view class="point" :class="{current: isActive>=1}"></view>
					<view class="line" :class="{on: isActive>1}"></view>
				</view>
				<view class="time" :class="{current: isActive>=1}">
					<view :class="{on: isActive>1}">机构签署</view>
					<view>{{ finishTime[0] }}</view>
				</view>
			</view>
			<view class="two">
				<view class="point-con">
					<view class="point" :class="{current: isActive>=2}"></view>
					<view class="line" :class="{on: isActive>2}"></view>
				</view>
				<view class="time" :class="{current: isActive>=2}">
					<view :class="{on: isActive>=2}">客户签署</view>
					<view>{{ finishTime[1] }}</view>
				</view>
			</view>
			<view class="two">
				<view class="point-con">
					<view class="point" :class="{current: isActive>=3}"></view>
					<view class="line" :class="{on: isActive>3}"></view>
				</view>
				<view class="time" :class="{current: isActive>=3}">
					<view :class="{on: isActive>=3}">支付费用</view>
					<view>{{ finishTime[2] }}</view>
				</view>
			</view>
			<view class="two">
				<view class="point-con">
					<view class="point" :class="{current: isActive>=4}"></view>
					<!-- <view class="line" :class="{on: isActive>4}"></view> -->
				</view>
				<view class="time" :class="{current: isActive>=4}">
					<view :class="{on: isActive>=4}">签约完成</view>
					<view>{{ finishTime[3] }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				contents: [
					{
						id: 1,
						key: '顾问发起',
						val: '¥16800'
					},
					{
						id: 2,
						key: '用户缴费',
						val: '已支付'
					},
					{
						id: 3,
						key: '电子签约',
						val: '已签约'
					},
					{
						id: 4,
						key: '服务评价',
						val: '已评价'
					}
				],
				// finishTime: ['2020-02-15 10:20', '2020-02-15 10:21', '2020-02-15 10:22', '2020-02-15 10:23']
				// isActive: 2
			}
		},
		props: {
			isActive: {
			  type: Number,
			  default: 1
			},
			finishTime: {
				type: Array,
				require: true
			}
		},
		created() {
			console.log(this.finishTime)
		},
		methods: {
			
		},
	}
</script>

<style lang="scss">
	.horizontal {
		display: flex;
		padding-top: 34rpx;
		.one {
			display: flex;
			flex-direction: column;
			width: 25%;
			justify-content: space-around;
			align-items: center;
			.title {
				font-family: PingFangSC-Regular;
				font-size: 26rpx;
				color: #000;
				padding-bottom: 18rpx;
			}
			.gou {
				width: 56rpx;
				height: 56rpx;
				background-color: #fedb0d;
				border-radius: 50%;
				text-align: center;
				line-height: 56rpx;
				position: relative;
				.line {
					width: 119rpx;
					height: 4rpx;
					background-color: #fedb0d;
					position: absolute;
					right: -118rpx;
					top: 26rpx;
				}
				.icongou {
					font-size: 32rpx;
				}
				.no {
					color: #fedb0d;
				}
			}
			.info {
				font-family: PingFangSC-Regular;
				font-size: 22rpx;
				color: #989898;
				padding-top: 16rpx;
			}
		}
		.one:last-child .gou .line {
			display: none;
		}
		
	}
	.vertical {
		padding-left: 57rpx;
		padding-top: 40rpx;
		// height: 324rpx;
		overflow: hidden;
		.two {
			display: flex;
			// align-items: center;
			.point-con {
				display: flex;
				position: relative;
				padding-top: 20rpx;
				width: 26rpx;
				justify-content: center;
				.point {
					width: 16rpx;
					height: 16rpx;
					background-color: #e5e5e5;
					border-radius: 50%;
					position: relative;
					z-index: 2;
				}
				.line {
					width: 1rpx;
					height: 120rpx;
					background-color: #e5e5e5;
					position: absolute;
					left: 12rpx;
					top: 32rpx;
				}
				.current {
					width: 26rpx;
					height: 26rpx;
					background-color: #9be666;
				}
				.on {
					background-color: #9be666;
				}
			}
			.time {
				padding-left: 26rpx;
				font-family: PingFangSC-Regular;
				font-size: 22rpx;
				color: #9a9a9a;
				padding-bottom: 50rpx;
				.on {
					font-size: 28rpx;
				}
				view:first-child {
					padding-top: 10rpx;
				}
			}
			.current {
				color: #9be666;
			}
		}
	}
</style>
